<template>
    <div class="goodlist">
       <div v-for="(item,index) in fenleiList" :key="index" class="goods-wrap" >
         <p class="goods-title">
              {{item.cat_name}}
         </p>
        <div v-for="(item1,index1) in item.children" :key="index1"  class="good-item">
        <img :src="item1.cat_icon" alt="">
        <p>
            {{item1.cat_name}}
        </p>
        
        </div>
       </div>
    </div>
</template>

<script>
export default {
    name: 'GoodList',
    props:{
        fenleiList:Array
    },
    // data() {
    //     return {
    //         fenleiList:this.fenleiObj.children
    //     };
    // },
    mounted(){
        console.log(this.fenleiList);
    },
    watch:{
        fenleiList(v1){
            console.log(v1);
        }
    }
};
</script>

<style lang="less" scoped>
    .goodlist{
        width:100%;
        height:100%;
        overflow: auto;
        .goods-wrap{
            display: flex;justify-content:space-between;align-items:center;
            flex-wrap: wrap;
            .goods-title{
                width:100%;
                line-height: 80px;text-align: center;
            }
            .good-item{
                width:30%; text-align: center;
                img{
                    width: 90%;
                }
                p{
                    width:100%;text-align: center;font-size:12px;
                }
            }
        }
    }
</style>